<template>
  <div class="box">
    <div class="header">
      <HeaderCom></HeaderCom>
    </div>

    <div class="center">
      <div class="left">
        <NavCom></NavCom>
      </div>
      <div class="right">
        <MainCom></MainCom>
      </div>
    </div>

    <div class="footer">
      <FooterCom></FooterCom>
    </div>
  </div>
</template>
<script>
import HeaderCom from '@/components/HeaderCom.vue'
import NavCom from '@/components/NavCom.vue'
import MainCom from '@/components/MainCom.vue'
import FooterCom from '@/components/FooterCom.vue'
export default {
  name: "App",
  components: {
    HeaderCom,
    NavCom,
    MainCom,
    FooterCom
  },
  data () {
    return {};
  },
  created () { },
  computed: {},
  methods: {},
};
</script>
<style lang='less'  scoped>
.box {
  height: 100vh;
  display: flex;
  flex-direction: column;
  .header {
    width: 100vw;
    height: 20vh;
    background-color: skyblue;
  }
  .center {
    flex: 1;
    display: flex;
    .left {
      width: 30vw;
      background-color: pink;
    }
    .right {
      flex: 1;
      background-color: hotpink;
    }
  }
  .footer {
    width: 100vw;
    height: 20vh;
    background-color: skyblue;
  }
}
</style>
